<template>
  <div class="new-product">
    <div class="new-product-box">
      <!-- 选择栏 -->
      <div class="new-product-select">
        <div class="new-product-select-name">
          <span>选择店铺:</span>
          <el-select
            v-model="shopSelectValue"
            clearable
            placeholder="请选择店铺"
            @change="onShopSlectChange"
          >
            <el-option
              v-for="item in shopSelectData"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="new-product-select-name" v-if="siteData.length">
          <span>站点:</span>
          <el-select
            v-model="siteValue"
            @change="onShopSelectSite"
            clearable
            placeholder="请选择站点"
          >
            <el-option
              v-for="item in siteData"
              :key="item.id"
              :label="item.country"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="new-product-select-name" v-if="amazonClassifyData.length">
          <span>商品分类:</span>
          <el-cascader
            :options="amazonClassifyData"
            :props="propsString"
            v-model="amazonData"
            @change="onAmazonShopChange"
            clearable
          ></el-cascader>
        </div>
        <div class="new-product-select-name">
          <span>模板名称:</span>
          <el-input placeholder="请输入模板名称" v-model="tempName" clearable>
          </el-input>
        </div>
        <div class="new-product-select-name">
          <span>条形码:</span>
          <el-select v-model="barCodeValue" clearable placeholder="请选择">
            <el-option
              v-for="item in barCodeData"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-if="barCodeValue != 3"
            v-model="barCodeEANValue"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in barCodeEANData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 类目 -->
        <div
          class="new-product-categories"
          v-if="Object.keys(categoriesData).length"
        >
          <div class="categories-title">
            <i class="el-icon-warning-outline"></i>
            类目信息（此部分选项将影响到商品上传的类目，请准确填写）
          </div>
          <!-- 类型 -->
          <div
            class="categories-input"
            v-if="Object.keys(categoriesData.feed_product_type_content).length"
          >
            <div class="categories-input-name">
              <div class="categories-input-name-title">
                <span
                  v-if="
                    categoriesData.feed_product_type_content.required ==
                    'required'
                  "
                  >*</span
                >
                {{ categoriesData.feed_product_type_content.local_label_name }}
                <i class="el-icon-warning-outline"></i>
              </div>
              <div class="categories-input-name-type">
                {{ categoriesData.feed_product_type_content.field_name }}
              </div>
            </div>
            <div class="categories-input-value">
              <el-select
                v-model="productTypeValue"
                clearable
                placeholder="请选择类型"
              >
                <el-option
                  v-for="(item, index) in categoriesData
                    .feed_product_type_content.validList.values_range"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 类目 -->
          <div
            class="categories-input"
            v-if="Object.keys(categoriesData.item_type_content).length"
          >
            <div class="categories-input-name">
              <div class="categories-input-name-title">
                <span
                  v-if="categoriesData.item_type_content.required == 'required'"
                  >*</span
                >
                {{ categoriesData.item_type_content.local_label_name }}
                <i class="el-icon-warning-outline"></i>
              </div>
              <div class="categories-input-name-type">
                {{ categoriesData.item_type_content.field_name }}
              </div>
            </div>
            <div class="categories-input-value">
              <el-select
                v-model="categoryTypeValue"
                clearable
                placeholder="请选择类目"
              >
                <el-option
                  v-for="(item, index) in categoriesData.item_type_content
                    .validList.values_range"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 人群 -->
          <div
            class="categories-input"
            v-if="Object.keys(categoriesData.department_name_content).length"
          >
            <div class="categories-input-name">
              <div class="categories-input-name-title">
                <span
                  v-if="
                    categoriesData.department_name_content.required ==
                    'required'
                  "
                  >*</span
                >
                {{ categoriesData.department_name_content.local_label_name }}
                <i class="el-icon-warning-outline"></i>
              </div>
              <div class="categories-input-name-type">
                {{ categoriesData.department_name_content.field_name }}
              </div>
            </div>
            <div class="categories-input-value">
              <el-select
                v-model="crowdTypeValue"
                clearable
                placeholder="请选择人群"
              >
                <el-option
                  v-for="(item, index) in categoriesData.department_name_content
                    .validList.values_range"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <!-- 产品SKU -->
      <div class="new-product-sku">
        <div class="new-product-sku-name">产品SKU</div>
        <div class="new-product-sku-content">
          <div class="new-product-sku-content-item">
            <div class="new-product-sku-content-item-name">引用SKU模板:</div>
            <div class="new-product-sku-content-item-input">
              <el-select v-model="skuValue" clearable placeholder="请选择模板">
                <el-option
                  v-for="item in skuData"
                  :key="item.id"
                  :label="item.rule_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="new-product-sku-content-item">
            <div class="new-product-sku-content-item-name">母体SKU:</div>
            <div class="new-product-sku-content-item-input">
              <el-input
                placeholder="请输入内容"
                v-model="matrixValue"
                clearable
              >
              </el-input>
            </div>
            <div
              class="insert-attributes"
              @click="
                setInsertAttributes({ attribute: 'matrix', isShow: true })
              "
            >
              插入属性
            </div>
          </div>
          <div class="new-product-sku-content-item">
            <div class="new-product-sku-content-item-name">变体SKU:</div>
            <div class="new-product-sku-content-item-input">
              <el-radio-group v-model="radio">
                <el-radio :label="1"
                  ><span v-text="'母体SKU-<color_name>-<size_name>'"></span
                ></el-radio>
                <el-radio :label="2">母体下按变体顺序从1开始自增</el-radio>
                <el-radio :label="3">与母体规则一致</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="new-product-sku-content-item">
            <div class="new-product-sku-content-item-name">简单商品SKU:</div>
            <div class="new-product-sku-content-item-input">
              <el-input
                placeholder="请输入商品SKU"
                v-model="simplenessValue"
                clearable
              >
              </el-input>
            </div>
            <div
              class="insert-attributes"
              @click="
                setInsertAttributes({
                  attribute: 'simplenessShop',
                  isShow: true,
                })
              "
            >
              插入属性
            </div>
          </div>
        </div>
      </div>
      <!-- 产品标题 -->
      <div class="new-product-headline">
        <div class="new-product-headline-name">产品标题</div>
        <div class="new-product-headline-content">
          <div class="new-product-headline-content-name">规则1:</div>
          <div class="new-product-headline-content-box">
            <div class="headline-content-box">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="ruleTextarea"
              >
              </el-input>
            </div>
            <div class="headline-content-box-title">
              <div class="headline-content-box-title-name">
                系统将自动对标题进行首字母大写
              </div>
              <div class="headline-content-box-title-right">
                <el-checkbox v-model="isSystemVoluntarily"
                  >系统自动截取</el-checkbox
                >
                <span>截取规则</span>
              </div>
            </div>
          </div>
        </div>
        <div class="new-product-headline-input">
          <span>库存数量:</span>
          <el-input
            placeholder="请输入库存数量"
            v-model="inventoryNum"
            clearable
          >
          </el-input>
        </div>
        <div class="new-product-headline-input">
          <span>标准价格:</span>
          <el-input
            placeholder="请输入标准价格"
            v-model="standardPrice"
            clearable
          >
          </el-input>
          <div
            class="insert-attributes"
            @click="setInsertAttributes({ attribute: 'price', isShow: true })"
          >
            插入属性
          </div>
        </div>
        <div class="new-product-headline-text">
          <span
            >*
            可填写standard_price引用定价模板，精算成本（运费，佣金等）为变体定价</span
          >
          <span
            >*
            如无需精确定价，可直接填写统一零售价。在汇出时或待发布列表调整变体价格</span
          >
        </div>
      </div>
      <!-- 产品图片 -->
      <div class="new-product-images">
        <div class="new-product-images-name">产品图片</div>
        <div class="new-product-images-content">
          <div class="new-product-images-content-name">
            每个变种将分别按照以下顺序汇出图片，第一张为主图。按照以下顺序汇出图片，最多支持
            9 张（长按拖动可调整图片顺序）
          </div>
          <div class="new-product-images-content-list">
            <draggable
              tag="transition-group"
              :componentData="componentData"
              :list="imageList"
              class="list-group"
              draggable=".item"
              :animation="100"
              @start="dragging = true"
              @end="dragging = false"
            >
              <div
                class="list-group-item item"
                v-for="(element, elementIdx) in imageList"
                :key="element.id + elementIdx"
              >
                <!-- <el-image :src="element.img" class="image-100"></el-image> -->
                <img :src="element.img" alt="" class="image-100" />
                <div class="list-group-item-bg">
                  <i
                    class="el-icon-delete"
                    @click="onImageProductDelete(elementIdx)"
                  ></i>
                </div>
              </div>
            </draggable>
            <div class="images-content-list-update" v-if="imageList.length < 9">
              <div class="images-content-list-update-image">
                <i class="el-icon-plus"></i>
              </div>
              <div class="images-broadside">
                <div class="images-broadside-list-av">
                  属性图片
                  <div class="images-broadside-material">
                    <div
                      class="broadside-material-list"
                      v-for="material in imageData"
                      :key="material.id"
                      @click="onAttributeInsertion(material)"
                    >
                      {{ material.title }}
                    </div>
                  </div>
                </div>

                <div class="images-broadside-list">本地图片</div>
                <div class="images-broadside-list">素材图片</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Swatch image -->
      <div class="new-product-swatch">
        <div class="new-product-swatch-name">Swatch image</div>
        <div class="new-product-swatch-content">
          <div class="new-product-swatch-content-name">
            swatch图片仅支持设置一张，每个变种按照以下设置汇出图片
          </div>
          <div class="new-product-swatch-content-list">
            <div
              class="new-product-swatch-content-list-image"
              v-if="swatchImageSrc.img"
            >
              <img class="image-100" :src="swatchImageSrc.img" alt="" />
              <div class="list-group-item-bg">
                <i class="el-icon-delete" @click="onSwatchImageDelete"></i>
              </div>
            </div>
            <div class="new-product-swatch-content-list-image" v-else>
              <div class="swatch-content-list-plus">
                <i class="el-icon-plus"></i>
              </div>
              <div class="swatch-content-image">
                <div class="swatch-content-image-title">
                  属性图片
                  <div class="image-title-item">
                    <div
                      class="swatch-content-image-list"
                      v-for="image in imageList"
                      :key="image.id"
                      @click="onSwatchImage(image)"
                    >
                      {{ image.title }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 类目描述等信息 -->
      <StencilInformation
        :categoriesData="categoriesData"
        v-if="Object.keys(categoriesData).length"
      />
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import { mapActions, mapMutations } from 'vuex';
import Product from '@/api/product';
import Way from '@/utils/way';
import Sku from '@/api/sku';
import Common from '@/api/common';
import imageData from '@/utils/json/product-image';
import StencilInformation from './stencil-information.vue';

export default {
  name: 'newProduct',
  components: { draggable, StencilInformation },
  props: {},
  data() {
    return {
      imageList: [
        {
          img: require('@/assets/image-product-add/image_1.jpg'),
          title: '<images[1]>',
          id: 1,
        },
        {
          img: require('@/assets/image-product-add/image_2.jpg'),
          title: '<images[2]>',
          id: 2,
        },
        {
          img: require('@/assets/image-product-add/image_3.jpg'),
          title: '<images[3]>',
          id: 3,
        },
        {
          img: require('@/assets/image-product-add/image_4.jpg'),
          title: '<images[4]>',
          id: 4,
        },
        {
          img: require('@/assets/image-product-add/image_5.jpg'),
          title: '<images[5]>',
          id: 5,
        },
        {
          img: require('@/assets/image-product-add/image_6.jpg'),
          title: '<images[6]>',
          id: 6,
        },
        {
          img: require('@/assets/image-product-add/image_7.jpg'),
          title: '<images[7]>',
          id: 7,
        },
        {
          img: require('@/assets/image-product-add/image_8.jpg'),
          title: '<images[8]>',
          id: 8,
        },
      ],
      imageData, // 全部图片
      dragging: false, // 移动图片配置
      componentData: {
        props: {
          type: 'transition',
          name: 'flip-list',
        },
      },
      radio: 1, // 变体SKU
      isSystemVoluntarily: true, // 系统自动截取
      ruleTextarea: '', // 规则
      propsString: {
        emitPath: false, // 只返回该节点的值
        expandTrigger: 'click',
        label: 'cate_title',
        value: 'id',
        children: 'children',
      },
      barCodeValue: '', // 条形码
      barCodeData: [
        { title: '生成', id: 1, name_id: 'generate' },
        { title: '导入', id: 2, name_id: 'import' },
        { title: '不汇出', id: 3, name_id: 'remit_not' },
      ], // 条形码
      barCodeEANData: [
        { label: 'EAN', value: 1 },
        { label: 'UPC', value: 2 },
      ],
      barCodeEANValue: '',
      tempName: '', // 模板名称
      skuData: [], // sku
      skuValue: '', // sku 选择
      amazonData: '', // 选中的商品分类
      amazonClassifyData: [], // 亚马逊分类
      shopSelectValue: '', // 店铺id
      siteValue: '', // 站点id
      siteData: [], // 站点数据
      matrixValue: '<shop_code>-<end_product_id>', // 母体SKU
      simplenessValue: '<shop_code>-<end_product_id>', // 简单商品SKU
      inventoryNum: '', // 库存数量
      standardPrice: '<standard_price>', // 标准价格
      swatchImageSrc: {}, // Swatch image 图片
      categoriesData: {}, // 类目属性
      productTypeValue: '', // 产品类型
      categoryTypeValue: '', // 类目
      crowdTypeValue: '', // 人群
    };
  },
  computed: {
    // 店铺列表
    shopSelectData() {
      return this.$store.state.product.shopSelectData;
    },
    // 插入的值改变
    employvalue() {
      return this.$store.state['insert-attributes'].employvalue;
    },
    dynamicState() {
      return this.$store.state['insert-attributes'].dynamicState;
    },
  },
  watch: {
    // 监听插入属性是否改变
    employvalue(val) {
      const dynamicState = this.dynamicState;
      if (val == '') return;
      // 母体SKU
      if (dynamicState.attribute == 'matrix') {
        this.matrixValue = `${this.matrixValue}-<${val}>`;
      } else if (dynamicState.attribute == 'simplenessShop') {
        this.simplenessValue = `${this.simplenessValue}-<${val}>`;
      } else if (dynamicState.attribute == 'price') {
        this.standardPrice = `${this.standardPrice}-<${val}>`;
      }
    },
  },
  created() {
    this.productStoreList();
    this.shopSiteList();
    // this.getAmazonTempCate();
    this.getSkuList();
  },
  methods: {
    ...mapActions('product', ['productStoreList']),
    ...mapActions('shop', ['shopSiteList']),
    ...mapMutations('insert-attributes', ['setInsertAttributes']),
    // 亚马逊分类
    getAmazonTempCate(val) {
      const that = this;
      Product.getAmazonTempCate({ site: val }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.amazonClassifyData = res.data;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 获取sku列表
    getSkuList() {
      const that = this;
      const params = {
        page: 1,
        limit: 30,
      };
      Sku.getSkuTempList(params).then((res) => {
        if (res.code == 200) {
          that.skuData = res.data.rows;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 属性图片选择点击事件
    onAttributeInsertion(item) {
      this.imageList.push(item);
    },

    // 删除产品图片
    onImageProductDelete(elementIdx) {
      this.imageList.splice(elementIdx, 1);
    },

    // Swatch image 图片 点击事件
    onSwatchImage(item) {
      this.swatchImageSrc = item;
    },

    // 删除 Swatch image 图片
    onSwatchImageDelete() {
      this.swatchImageSrc = {};
    },

    // 选择店铺
    onShopSlectChange(val) {
      const that = this;
      const shopData = this.shopSelectData.filter((oj) => oj.id == val);
      if (shopData.length) {
        Common.getCommonSiteList({ site: shopData[0].site }).then((res) => {
          if (res.code == 200) {
            this.siteValue = '';
            that.siteData = res.data.rows;
          } else {
            Way.setMessage(res.msg, 3);
          }
        });
      }
    },

    // 选择站点
    onShopSelectSite(val) {
      console.log(val);
      this.getAmazonTempCate(val);
    },

    // 商品分类 change 事件
    onAmazonShopChange(val) {
      if (val) {
        this.getAmazonTempCateAttr();
      }
    },

    // 亚马逊分类对应的属性
    getAmazonTempCateAttr() {
      const that = this;
      if (this.siteValue == '') {
        return Way.setMessage('请选择站点', 2);
      }

      Product.getAmazonTempCateAttr({
        cate_id: this.amazonData,
        site: this.siteValue,
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          if (
            data.feed_product_type_content &&
            data.feed_product_type_content.validList
          ) {
            data.feed_product_type_content.validList.values_range = JSON.parse(
              data.feed_product_type_content.validList.values_range
            );
          }
          if (data.item_type_content && data.item_type_content.validList) {
            data.item_type_content.validList.values_range = JSON.parse(
              data.item_type_content.validList.values_range
            );
          }
          if (data.department_name_content) {
            data.department_name_content.validList.values_range = JSON.parse(
              data.department_name_content.validList.values_range
            );
          }
          that.categoriesData = res.data;
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 保存模板
    confirmTemp() {
      const params = {
        template_name: this.tempName, // 模板名称
        shop_id: this.shopSelectValue, // 店铺id
        site: this.siteValue, // 站点id
        cate_id: this.amazonData, // 分类id
        feed_product_type: this.productTypeValue, // 产品类型
        item_type: this.categoryTypeValue, // 产品类目
        department_name: this.crowdTypeValue, //使用人群
        barcode_set_type: this.barCodeValue, // 条码生成方式
        barcode_type: this.barCodeEANValue, // 条码类型
        parent_sku: this.matrixValue, // 母体SKU
        variant_sku: this.radio, // 变体
        product_title: this.ruleTextarea, // 产品标题
        inventory: this.inventoryNum, // 库存
        standard_price: this.standardPrice, // 价格
        product_pic: '', // 图片组
        last_product_pic_type: '', // 第九张图片类型：1=属性图片;2=本地图片;3=素材图片;4素材变量
        swatch_image: '', // swatch_image
        necessary_amazon_template_content: '', // 类目重要属性，json字符串
        other_amazon_template_content: '', // 其它属性，json字符串
        description_amazon_template_content: '', // 商品描述属性，json字符串
      };
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.new-product {
  .new-product-box {
    height: 500px;
    overflow-y: auto;
  }
  // 选择栏
  .new-product-select {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .new-product-select-name {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      width: 100%;

      span {
        text-align: right;
        width: 60px;
        padding-right: 12px;
      }
      .el-select {
        flex: 1;
        margin-right: 12px;
      }
      .el-input {
        flex: 1;
        margin-right: 12px;
      }
      .el-cascader {
        flex: 1;
        margin-right: 12px;
      }
    }

    // 类目
    .new-product-categories {
      padding: 15px 10px;
      border: 1px dashed #d9d9d9;
      border-radius: 8px;
      margin-right: 12px;
      width: 100%;
      background-color: #eee;

      .categories-title {
        font-size: 12px;
      }

      .categories-input {
        display: flex;
        margin: 20px 0;

        .categories-input-name {
          padding-right: 12px;
          width: 140px;

          .categories-input-name-title {
            font-size: 14px;
            span {
              color: red;
            }
          }
          .categories-input-name-type {
            font-size: 12px;
          }
          > div {
            text-align: right;
          }
        }
        .categories-input-value {
          flex: 1;
        }
      }
    }
  }
  // 产品SKU
  .new-product-sku {
    .new-product-sku-name {
      height: 40px;
      line-height: 40px;
      font-weight: 700;
    }
    .new-product-sku-content {
      padding: 12px 24px;
      border: 1px solid #ebebeb;

      .new-product-sku-content-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        .new-product-sku-content-item-name {
          padding-right: 12px;
          text-align: right;
          width: 100px;
        }

        .new-product-sku-content-item-input {
          flex: 1;
          display: flex;
          align-items: center;
          .el-radio {
            padding: 10px 0;
          }
        }

        .insert-attributes {
          cursor: pointer;
          padding-left: 12px;
        }
      }
    }
  }
  // 产品标题
  .new-product-headline {
    .new-product-headline-name {
      height: 40px;
      line-height: 40px;
      font-weight: 700;
    }
    .new-product-headline-content {
      display: flex;
      padding: 12px 24px;
      border: 1px solid #ebebeb;

      .new-product-headline-content-name {
        padding-right: 12px;
        width: 80px;
        text-align: right;
      }

      .new-product-headline-content-box {
        flex: 1;

        .headline-content-box-title {
          display: flex;
          justify-content: space-between;

          .headline-content-box-title-right {
            span {
              margin-left: 12px;
              color: #0054f9;
            }
          }
        }
      }
    }
    .new-product-headline-input {
      display: flex;
      align-items: center;
      padding-top: 12px;

      span {
        padding-right: 12px;
      }

      .el-input {
        flex: 1;
      }

      .insert-attributes {
        cursor: pointer;
        width: 100px;
        padding-left: 12px;
      }
    }
    .new-product-headline-text {
      display: flex;
      flex-direction: column;
      text-align: right;
      font-size: 12px;
      color: #999;
    }
  }
  // 产品图片
  .new-product-images {
    .new-product-images-name {
      height: 40px;
      line-height: 40px;
      font-weight: 700;
    }
    .new-product-images-content {
      display: flex;
      flex-direction: column;
      padding: 12px 24px;
      border: 1px solid #ebebeb;

      .new-product-images-content-name {
        font-size: 12px;
      }

      .new-product-images-content-list {
        display: flex;
        flex-direction: column;
        padding-top: 12px;
        width: 100%;

        .list-group {
          display: flex;
          flex-wrap: wrap;
        }
        .list-group-item {
          position: relative;
          margin-right: 12px;
          margin-bottom: 12px;
          width: 80px;
          height: 80px;
          cursor: move;
          border: 1px solid #ebebeb;

          &:hover .list-group-item-bg {
            display: block;
          }

          .list-group-item-bg {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            text-align: center;
            width: 80px;
            height: 80px;
            line-height: 80px;
            background-color: rgba(34, 34, 34, 0.6);
            i {
              cursor: pointer;
              color: #fff;
            }
          }

          img {
            box-sizing: border-box;
            padding: 5px;
          }
        }

        .images-content-list-update {
          position: relative;
          width: 80px;
          height: 80px;

          &:hover .images-broadside {
            display: block;
          }

          .images-content-list-update-image {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            width: 80px;
            height: 80px;
            border: 1px solid #ebebeb;
          }

          .images-broadside {
            display: none;
            position: absolute;
            right: -80px;
            top: 0;
            width: 80px;
            cursor: pointer;

            .images-broadside-list-av {
              position: relative;
              font-size: 12px;
              height: 25px;
              line-height: 25px;
              text-align: center;
              border: 1px solid #dee2e6;

              &:hover .images-broadside-material {
                display: block;
              }

              &:hover {
                color: #fff;
                background-color: #339af0;
                border: 1px solid #339af0;
              }

              .images-broadside-material {
                position: absolute;
                left: 80px;
                top: 0;
                display: none;
                width: 120px;
                height: 200px;
                overflow-y: auto;

                .broadside-material-list {
                  height: 25px;
                  line-height: 25px;
                  text-align: center;
                  font-size: 12px;
                  // padding: 0 10px;
                  border: 1px solid #dee2e6;
                  background-color: #fff;
                  color: #666;

                  &:hover {
                    color: #fff;
                    background-color: #339af0;
                    border: 1px solid #339af0;
                  }
                }
              }
            }

            .images-broadside-list {
              font-size: 12px;
              height: 25px;
              line-height: 25px;
              text-align: center;
              border: 1px solid #dee2e6;

              &:hover {
                color: #fff;
                background-color: #339af0;
                border: 1px solid #339af0;
              }
            }
          }
        }
      }
    }
  }
  // Swatch image
  .new-product-swatch {
    .new-product-swatch-name {
      height: 40px;
      line-height: 40px;
      font-weight: 700;
    }
    .new-product-swatch-content {
      padding: 12px 24px;
      border: 1px solid #ebebeb;

      .new-product-swatch-content-name {
        font-size: 12px;
        padding-bottom: 12px;
      }

      .new-product-swatch-content-list {
        display: flex;
        flex-wrap: wrap;

        .new-product-swatch-content-list-image {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          margin-right: 12px;
          width: 80px;
          height: 80px;
          border: 1px solid #ebebeb;
          padding: 5px;

          &:hover .list-group-item-bg {
            display: block;
          }

          .list-group-item-bg {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            text-align: center;
            width: 80px;
            height: 80px;
            line-height: 80px;
            background-color: rgba(34, 34, 34, 0.6);
            i {
              color: #fff;
              cursor: pointer;
            }
          }

          &:hover .swatch-content-image {
            display: block;
          }

          .swatch-content-image {
            display: none;
            position: absolute;
            top: 0;
            left: 80px;
            width: 80px;
            text-align: center;
            background-color: #fff;

            .swatch-content-image-title {
              position: relative;
              height: 25px;
              line-height: 25px;
              border: 1px solid #dee2e6;

              &:hover {
                color: #fff;
                background-color: #339af0;
                border: 1px solid #339af0;
              }

              &:hover .image-title-item {
                display: block;
              }
            }

            .image-title-item {
              position: absolute;
              left: 80px;
              bottom: 0;
              display: none;
              .swatch-content-image-list {
                width: 100px;
                height: 25px;
                line-height: 25px;
                color: #666;
                border: 1px solid #dee2e6;
                background-color: #fff;

                &:hover {
                  color: #fff;
                  background-color: #339af0;
                  border: 1px solid #339af0;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
